<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry"
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
import * as Cesium from 'cesium'
import TCesium from '@/utils/TCesium.js'

let tCesium
const loader = new THREE.FileLoader()
const mapGroup = new THREE.Group()
THREE.Cache.enabled = true
loader.setResponseType('json')
function animate() {
  tCesium.renderCesium()
  tCesium.renderThree()
  requestAnimationFrame(animate)
}
onMounted(() => {
  tCesium = new TCesium('cesiumContainer', [-180, -90], [180, 90])
  window.tCesium = tCesium
  tCesium.cesium.viewer.scene.globe.depthTestAgainstTerrain = false
  animate()
  let geometry1 = new THREE.PlaneGeometry(50, 50)
  // 自定义顶点着色器
  const vertexShader1 = `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
    `
    // 自定义片元着色器
  const fragmentShader1 = `
    varying vec2 vUv;
    uniform float uTime;
    void main() {
      float dist = distance(vUv, vec2(0.5));
      // 制作一个圆环
      // vec3 color = vec3(step(0.3, dist)) - vec3(step(0.4, dist));
      // 制作三个圆环
      // 定义三个圆环的内外半径
      float ring1_inner = fract(uTime * 0.5) - 0.9;
      float ring1_outer = fract(uTime * 0.5) - 0.8;
      float ring2_inner = fract(uTime * 0.5) - 0.7;
      float ring2_outer = fract(uTime * 0.5) - 0.6;
      float ring3_inner = fract(uTime * 0.5) - 0.5;
      float ring3_outer = fract(uTime * 0.5) - 0.4;

      float alpha = step(ring1_inner, dist) * (1.0 - step(ring1_outer, dist))
                    + step(ring2_inner, dist) * (1.0 - step(ring2_outer, dist))
                    + step(ring3_inner, dist) * (1.0 - step(ring3_outer, dist));
      gl_FragColor = vec4(1.0, 0.0, 0.0, alpha);
    }
    `
    // 定义材质
  const material1 = new THREE.ShaderMaterial({
    uniforms: {
      uTime: { value: 0 }
    },
    vertexShader: vertexShader1,
    fragmentShader: fragmentShader1,
  })
  let mesh1 = new THREE.Mesh(geometry1, material1)
  let time = 0;
    (function animate() {
      time += 0.05
      material1.uniforms.uTime.value = time
      requestAnimationFrame(animate)
    })();
  tCesium.addMesh(mesh1, {
    centerWGS84: [110, 35]
  })
  // 添加3D样条
  const curve = new THREE.CubicBezierCurve3(
  	new THREE.Vector3( -100, 0, 0 ),
  	new THREE.Vector3( -50, 150, 0 ),
  	new THREE.Vector3( 200, 150, 0 ),
  	new THREE.Vector3( 100, 0, 0 )
  );
  // 均匀分布的点
  const curvePoints = curve.getPoints(1000)
  // 等距离分布的点
  // const curvePoints = curve.getSpacedPoints(10)
  console.log('弧长是:', curve.getLength())
  
  const points2 = []
  curvePoints.forEach(point => points2.push(point.x, point.y, point.z))
  const curveGeometry2 = new LineGeometry()
  curveGeometry2.setPositions(points2)
  const curveMaterial2 = new LineMaterial({
    linewidth: 5,
    color: 'blue'
  })
  curveMaterial2.resolution.set(window.innerWidth, window.innerHeight)
  const sphere = new THREE.Mesh(curveGeometry2, curveMaterial2)
  tCesium.addMesh(sphere, {
    centerWGS84: [115, 35]
  })
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}
</style>